import React, {useState} from "react";
import {Modal} from "antd";
import {createStyles} from "antd-style";

const useStyles = createStyles(({css, token}) => {
    return {
        bgSelectorContent: css`
            padding: 0 !important;
            height: 70vh;
            display: flex;
            flex-direction: column;
            place-items: center;
            overflow: auto;
            
            .selectors {
                li {
                    padding: 8px 10px;
                    user-select: none;
                    font-size: 20px;

                    &:nth-child(2n) {
                        background-color: ${token.colorPrimaryBg};
                    }

                    &:nth-child(2n + 1) {
                        background-color: ${token.colorPrimaryBgHover};
                    }

                    &:hover {
                        cursor: pointer;
                        background-color: ${token.colorPrimaryActive};
                    }
                }
            }
        `
    }
})

interface Props {
    props: {
        setPhotoContainerIndex: React.Dispatch<React.SetStateAction<number>>
        photoInfo: [{
            name: string
            size: number
        }] | []
        showModal: boolean
        setShowModal: React.Dispatch<React.SetStateAction<boolean>>
    }
}

const PhotoContainerSelector: React.FC<Props> = (props) => {
    const styles = useStyles().styles
    const {photoInfo, setPhotoContainerIndex, showModal, setShowModal} = props.props

    return (
        <Modal open={showModal}
               footer={null}
               title={null}
               keyboard={true}
               closeIcon={null}
               onCancel={() => setShowModal(false)}
               classNames={{content: styles.bgSelectorContent}}
        >
            <ul className="selectors">
                {
                    photoInfo.length > 0 ? photoInfo.map((value, index) => {
                        return (
                            <li key={index} onClick={() => {
                                setPhotoContainerIndex(index)
                                setShowModal(false) // 关闭对话框
                                // @ts-ignore
                            }}>
                                {index}：{value.name}
                            </li>
                        )
                    }) : <li key={0}>empty</li>
                }
            </ul>
        </Modal>
    )
}

export default PhotoContainerSelector;
